<template>
  <div class="dialog">
    <el-dialog title="新增文章" :visible="isAddDialogShow" @close="addCancel">
      <!-- 表单 -->
      <el-form ref="formData" :rules="rules" :model="formData" label-width="120px">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="formData.title" placeholder="请输入文章标签" />
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody">
          <RichText :form-data="formData" />
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL">
          <el-input v-model="formData.videoURL" placeholder="请输入视频地址" />
        </el-form-item>
      </el-form>
      <!-- 底部 -->
      <el-row slot="footer" type="flex" justify="center" align="middle">
        <el-col :span="6">
          <el-button size="small" @click="addCancel">取消</el-button>
          <el-button size="small" type="primary" @click="isOk">确定</el-button>
        </el-col>
      </el-row>

    </el-dialog>
  </div>
</template>


<script>
import RichText from '@/components/RichText/richText.vue'
import { addArticlesAPI, editArticlesAPI } from '@/api'
export default {
	name: 'AddDialog',
	components: {
		RichText
	},
	props: {
		isAddDialogShow: {
			type: Boolean
		},
		// eslint-disable-next-line vue/prop-name-casing
		Role: {
			type: Object,
			default: () => {}
		},
		// eslint-disable-next-line vue/prop-name-casing
		RoleId: {
			type: String,
			default: () => ''
		}

	},
	data() {
		return {
			formData: {
				title: '',
				articleBody: '',
				videoURL: ''
			},
			rules: {
        title: [{ required: true, message: '文章标题不能为空', trigger: 'blur' }],
        articleBody: [{ required: true, message: '文章内容不能为空', trigger: 'blur' }],
				videoURL: [{ required: true, message: '文章视频不能为空', trigger: 'blur' }]
      }
		}
	},
	watch: {
		Role(newVal) {
			this.formData = newVal
		}
	},
	methods: {
		// 点击确定按钮，新增权限(两个新增，新增大权限，新增子权限)
		async	isOk() {
			this.$refs.formData.validate().then(() => {
				// 校验成功
				if (this.RoleId) {
					// 如果有值，则认为是编辑，执行更新接口
					return editArticlesAPI(this.RoleId, {
						title: this.formData.title,
						articleBody: this.formData.articleBody,
						videoURL: this.formData.videoURL,
						id: this.RoleId
					})
				} else {
					return addArticlesAPI(this.formData)
				}
			}).then(() => {
				// 添加成功
				this.$emit('update:isAddDialogShow', false)
				this.$parent.getLabelTags()
			})
		},

		// 点击取消按钮，关闭弹出层
		addCancel() {
			// 重置数据
			this.$emit('updateFormdata', {
				title: '',
				articleBody: '',
				videoURL: ''
      })
			this.$emit('update:isAddDialogShow', false)
		}
	}

}
</script>

<style scoped>
::v-deep .el-dialog{
	border-radius: 15px;
}
::v-deep .el-dialog__header{
	background-color:#409eff;
	border-radius: 15px 15px 0 0;

}
::v-deep .el-dialog__title{
	color:#fff;
}
::v-deep .el-dialog__close{
	color:#fff
}
::v-deep .el-input{
	width: 600px !important;
}
</style>